<template>
  <view>
    <uni-swipe-action>
      <uni-swipe-action-item>
        <view class="goods-item" @click="gotoGoodsDetail">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <radio :checked="goods.goods_state" color="#c00000" v-show="showRadio" @click.stop="radioClickHandler"></radio>
            <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
          </view>
          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ goods.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price">￥{{ goods.goods_price | tofixed }}</view>
              <!-- 商品数量 -->
              <uni-number-box :min="1" :value="goods.goods_count" @click.native.stop="() => {}" @change="numChangeHandler"></uni-number-box>
            </view>
          </view>
        </view>

        <template v-slot:right>
          <view class="slot-button" @click="deleteClick"><text class="slot-button-text">删除</text></view>
        </template>
      </uni-swipe-action-item>
    </uni-swipe-action>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'
export default {
  name: 'my-goods',
  props: {
    // 商品的信息对象
    goods: {
      type: Object,
      defaul: {}
    },
    showRadio: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    tofixed(num) {
      return num.toFixed(2);
    }
  },
  data() {
    return {
      // 默认的空图片
      defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
    };
  },
  methods: {
    ...mapMutations('m_cart', ['deleteGoods']),
    deleteClick() {
      console.log('deleteClick');
      this.deleteGoods({
        goods_id: this.goods.goods_id
      })
    },
    radioClickHandler() {
      this.$emit('radio-change', {
        goods_id: this.goods.goods_id,
        goods_state: !this.goods.goods_state
      });
    },
    gotoGoodsDetail() {
      uni.navigateTo({
        url: '/subpkg/goods_detail/goods_detail?goods_id=' + this.goods.goods_id
      });
    },
    numChangeHandler(val) {
      this.$emit('num-change', {
        goods_id: this.goods.goods_id,
        goods_count: +val
      });
    }
  }
};
</script>

<style lang="scss">
.goods-item {
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;

  .goods-item-left {
    margin-right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .goods-pic {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 13px;
    }

    .goods-price {
      font-size: 16px;
      color: #c00000;
    }
  }
}
.goods-info-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.slot-button {
  /* #ifndef APP-NVUE */
  display: flex;
  height: 100%;
  /* #endif */
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background-color: #ff5a5f;
}

.slot-button-text {
  color: #ffffff;
  font-size: 14px;
}
</style>
